<div class="dashboard-wrapper">

    <div class="left-sidebar">

        <div class="row-fluid">
            <div class="span12">
                <div class="widget">
                    <div class="widget-header">
                        <div class="title">
                            Nhập - Xuất
                            <span class="mini-title">
                                Biểu đồ giá trị nhập xuất trong 06 tháng gần nhất
                            </span>
                        </div>
                    </div>
                    <div class="widget-body">
                        <div id="area_chart">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span12">
                <div class="widget">
                    <div class="widget-header">
                        <div class="title">
                            Top 05 dự án có giá trị
                        </div>
                    </div>
                    <div class="widget-body">
                        <div id="column_chart">
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <div class="right-sidebar">

        <div class="wrapper">
            <ul class="stats">
                <li>
                    <div class="left">
                        <h4>
                            1868
                        </h4>
                        <p>
                            Dự án
                        </p>
                    </div>
                    <div class="chart">
                        <span id="unique-visitors">
                            2, 4, 1, 7, 9, 8, 2, 3, 5, 6
                        </span>
                    </div>
                </li>
                <li>
                    <div class="left">
                        <h4>
                            $92,288
                        </h4>
                        <p>
                            Giá trị Nhập
                        </p>
                    </div>
                    <div class="chart">
                        <span id="monthly-sales">
                            3, 9, 8, 5, 3, 5, 2, 3, 4, 7
                        </span>
                    </div>
                </li>
                <li>
                    <div class="left">
                        <h4>
                            $48,830
                        </h4>
                        <p>
                            Giá trị Xuất
                        </p>
                    </div>
                    <div class="chart">
                        <span id="current-balance">
                            3, 5, 8, 5, 3, 5, 2, 9, 6, 8
                        </span>
                    </div>
                </li>
                <li>
                    <div class="left">
                        <h4>
                            22,846
                        </h4>
                        <p>
                            Vật tư nhập
                        </p>
                    </div>
                    <div class="chart">
                        <span id="registrations">
                            3, 9, 0, 5, 0, 5, 0, 9, 6, 8
                        </span>
                    </div>
                </li>
                <li>
                    <div class="left">
                        <h4>
                            16,530
                        </h4>
                        <p>
                            Vật tư xuất
                        </p>
                    </div>
                    <div class="chart">
                        <span id="site-visits">
                            2, 5, 0, 6, 0, 5, 0, 7, 9, 5
                        </span>
                    </div>
                </li>
            </ul>
        </div>

        <hr class="hr-stylish-1">


        <div class="wrapper">
            <div id="scrollbar">
                <div class="scrollbar">
                    <div class="track">
                        <div class="thumb">
                            <div class="end">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="viewport">
                    <div class="overview">
                        <div class="featured-articles-container">
                            <h5 class="heading">
                                Lần truy cập gần nhất
                            </h5>
                            <div class="articles">
                                <a href="#">
                                    <span class="label-bullet">
                                        &nbsp;
                                    </span>
                                    Login IP: 192.168.1.1
                                    Mon 16/10/2014 06:38 PM
                                </a>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //ScrollUp


    //Google Visualiations
    google.load("visualization", "1", {
        packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);
    google.setOnLoadCallback(drawChart2);
    google.setOnLoadCallback(drawChart3);
    google.setOnLoadCallback(drawChart4);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Time', ' Giá trị nhập', 'Giá trị xuất'],
            ['Apr', 19709, 16761],
            ['May', 21367, 18631],
            ['June', 16792, 9971],
            ['July', 11267, 7491],
            ['Aug', 9539, 5792],
            ['Sep', 8670, 9367],
            ['Oct', 24761, 16809]
        ]);

        var options = {
            width: 'auto',
            height: '160',
            backgroundColor: 'transparent',
            colors: ['#ed6d49', '#0daed3'],
            tooltip: {
                textStyle: {
                    color: '#666666',
                    fontSize: 11
                },
                showColorCode: true
            },
            legend: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            chartArea: {
                left: 100,
                top: 10
            },
            focusTarget: 'category',
            hAxis: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            vAxis: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            pointSize: 6,
            chartArea: {
                left: 60,
                top: 10,
                height: '80%'
            },
            lineWidth: 1,
        };

        var chart = new google.visualization.LineChart(document.getElementById('area_chart'));
        chart.draw(data, options);
    }


    //Tooltip
    $('a').tooltip('hide');
    $('i').tooltip('hide');


    //Tiny Scrollbar
    $('#scrollbar').tinyscrollbar();
    $('#scrollbar-one').tinyscrollbar();
    $('#scrollbar-two').tinyscrollbar();
    $('#scrollbar-three').tinyscrollbar();



    //Tabs
    $('#myTab a').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    })

    // SparkLine Graphs-Charts
    $(function() {
        $('#unique-visitors').sparkline('html', {
            type: 'bar',
            barColor: '#ed6d49',
            barWidth: 6,
            height: 30,
        });
        $('#monthly-sales').sparkline('html', {
            type: 'bar',
            barColor: '#74b749',
            barWidth: 6,
            height: 30,
        });
        $('#current-balance').sparkline('html', {
            type: 'bar',
            barColor: '#ffb400',
            barWidth: 6,
            height: 30,
        });
        $('#registrations').sparkline('html', {
            type: 'bar',
            barColor: '#0daed3',
            barWidth: 6,
            height: 30,
        });
        $('#site-visits').sparkline('html', {
            type: 'bar',
            barColor: '#f63131',
            barWidth: 6,
            height: 30,
        });
    });

    //wysihtml5
    $('#wysiwyg').wysihtml5();

    //graph input
    $(document).ready(function() {
        pie_chart();
        sparkline_graphs();
    });

    function pie_chart() {
        $(function() {
            //create instance
            $('.chart1').easyPieChart({
                animate: 2000,
                barColor: '#74b749',
                trackColor: '#dddddd',
                scaleColor: '#74b749',
                size: 180,
                lineWidth: 5,
            });
            //update instance after 5 sec
            setTimeout(function() {
                $('.chart1').data('easyPieChart').update(50);
            }, 5000);
            setTimeout(function() {
                $('.chart1').data('easyPieChart').update(70);
            }, 10000);
            setTimeout(function() {
                $('.chart1').data('easyPieChart').update(30);
            }, 15000);
            setTimeout(function() {
                $('.chart1').data('easyPieChart').update(90);
            }, 19000);
            setTimeout(function() {
                $('.chart1').data('easyPieChart').update(40);
            }, 32000);
        });

        $(function() {
            //create instance
            $('.chart2').easyPieChart({
                animate: 2000,
                barColor: '#ed6d49',
                trackColor: '#dddddd',
                scaleColor: '#ed6d49',
                size: 180,
                lineWidth: 5,
            });
            //update instance after 5 sec
            setTimeout(function() {
                $('.chart2').data('easyPieChart').update(90);
            }, 10000);
            setTimeout(function() {
                $('.chart2').data('easyPieChart').update(40);
            }, 18000);
            setTimeout(function() {
                $('.chart2').data('easyPieChart').update(70);
            }, 28000);
            setTimeout(function() {
                $('.chart2').data('easyPieChart').update(50);
            }, 32000);
            setTimeout(function() {
                $('.chart2').data('easyPieChart').update(80);
            }, 40000);
        });

        $(function() {
            //create instance
            $('.chart3').easyPieChart({
                animate: 2000,
                barColor: '#0daed3',
                trackColor: '#dddddd',
                scaleColor: '#0daed3',
                size: 180,
                lineWidth: 5,
            });
            //update instance after 5 sec
            setTimeout(function() {
                $('.chart3').data('easyPieChart').update(20);
            }, 9000);
            setTimeout(function() {
                $('.chart3').data('easyPieChart').update(59);
            }, 20000);
            setTimeout(function() {
                $('.chart3').data('easyPieChart').update(38);
            }, 35000);
            setTimeout(function() {
                $('.chart3').data('easyPieChart').update(79);
            }, 49000);
            setTimeout(function() {
                $('.chart3').data('easyPieChart').update(96);
            }, 52000);
        });

        $(function() {
            //create instance
            $('.chart4').easyPieChart({
                animate: 2000,
                barColor: '#ffb400',
                trackColor: '#dddddd',
                scaleColor: '#ffb400',
                size: 180,
                lineWidth: 5,
            });
            //update instance after 5 sec
            setTimeout(function() {
                $('.chart4').data('easyPieChart').update(40);
            }, 6000);
            setTimeout(function() {
                $('.chart4').data('easyPieChart').update(67);
            }, 14000);
            setTimeout(function() {
                $('.chart4').data('easyPieChart').update(43);
            }, 23000);
            setTimeout(function() {
                $('.chart4').data('easyPieChart').update(80);
            }, 36000);
            setTimeout(function() {
                $('.chart4').data('easyPieChart').update(66);
            }, 41000);
        });


        $(function() {
            //create instance
            $('.chart5').easyPieChart({
                animate: 3000,
                barColor: '#F63131',
                trackColor: '#dddddd',
                scaleColor: '#F63131',
                size: 180,
                lineWidth: 5,
            });
            //update instance after 5 sec
            setTimeout(function() {
                $('.chart5').data('easyPieChart').update(30);
            }, 9000);
            setTimeout(function() {
                $('.chart5').data('easyPieChart').update(87);
            }, 19000);
            setTimeout(function() {
                $('.chart5').data('easyPieChart').update(28);
            }, 27000);
            setTimeout(function() {
                $('.chart5').data('easyPieChart').update(69);
            }, 39000);
            setTimeout(function() {
                $('.chart5').data('easyPieChart').update(99);
            }, 47000);
        });


    }


    function sparkline_graphs() {
        $(function() {
            $('#stock-graph').sparkline('html', {
                type: 'bar',
                barColor: '#0daed3',
                barWidth: 7,
                height: 38,
            });
        });
    }


    google.load("visualization", "1", {
        packages: ["corechart"]
    });

    $(document).ready(function() {
        drawChart2();
        drawChart3();
        drawChart4();
    })



    function drawChart2() {
        var data = google.visualization.arrayToDataTable([
            ['Week', 'Visitors', 'Orders'],
            ['Sun', 9709, 761],
            ['Mon', 1367, 8631],
            ['Tue', 6792, 971],
            ['Wed', 1267, 7491],
            ['Thu', 9539, 1792],
            ['Fri', 670, 9367],
            ['Sat', 9761, 709]
        ]);

        var options = {
            width: 'auto',
            height: '160',
            backgroundColor: 'transparent',
            colors: ['#ed6d49', '#0daed3'],
            tooltip: {
                textStyle: {
                    color: '#666666',
                    fontSize: 11
                },
                showColorCode: true
            },
            legend: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            chartArea: {
                left: 100,
                top: 10
            },
            focusTarget: 'category',
            hAxis: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            vAxis: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            pointSize: 6,
            chartArea: {
                left: 60,
                top: 10,
                height: '80%'
            },
            lineWidth: 1,
        };

        var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
        chart.draw(data, options);
    }


    function drawChart3() {
        var data = google.visualization.arrayToDataTable([
            ['Dự Án', 'Nhập', 'Xuất', 'Lợi nhuận'],
            ['Vista Verde', 9800, 9900, 11500],
            ['The Prince', 8170, 8860, 13208],
            ['Mia Resort', 12870, 12340, 26230],
            ['SaigonBank', 8030, 8200, 15069],
            ['Nissin Foods', 12700, 12770, 33889],
            ['SunSteel', 8170, 6160, 16069], ]);

        var options = {
            width: 'auto',
            height: '160',
            backgroundColor: 'transparent',
            colors: ['#ed6d49', '#0daed3', '#ffb400', '#74b749', '#f63131'],
            tooltip: {
                textStyle: {
                    color: '#666666',
                    fontSize: 11
                },
                showColorCode: true
            },
            legend: {
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            chartArea: {
                left: 60,
                top: 10,
                height: '80%'
            },
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('column_chart'));
        chart.draw(data, options);
    }

    function drawChart4() {
        var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['Eat', 2],
            ['Work', 10],
            ['Commute', 2],
            ['Read', 2],
            ['Sleep', 8]
        ]);

        var options = {
            width: 'auto',
            height: '160',
            backgroundColor: 'transparent',
            colors: ['#ed6d49', '#74b749', '#0daed3', '#ffb400', '#f63131'],
            tooltip: {
                textStyle: {
                    color: '#666666',
                    fontSize: 11
                },
                showColorCode: true
            },
            legend: {
                position: 'left',
                textStyle: {
                    color: 'black',
                    fontSize: 12
                }
            },
            chartArea: {
                left: 0,
                top: 10,
                width: "100%",
                height: "100%"
            }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
        chart.draw(data, options);
    }
</script>